<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link href="basic.css" rel="stylesheet" type="text/css" />
<link href="dropzone.css" rel="stylesheet" type="text/css" />
<style>
    .ls-div {
        max-width: 1370px;
        margin: 15px auto;
        background-color: white;
        border: 2px solid grey;
        border-radius: 8px;
    }
    .ls-img-item {
        padding: 5px;  
        float: left;
    }
    .ls-img-l {
        width: 55px;
        padding: 13px;
        border-right: 2px solid grey;            
    }
    .ls-img-r {
        width: 55px;
        padding: 13px;
        border-left: 2px solid grey;       
        cursor: pointer;        
    }
    .ls-content {
        display: inline-block;
        padding: 30px 10px;
        margin-left: 10px;
        font-size: 25px;      
        cursor: pointer;        
    }
    .ls-img-delete {
        padding: 5px;       
        float: right;     
                  
    }
    .ls-div:hover {
        background-color: antiquewhite;
    }
    a { text-decoration:none; }
    a, a:active, a:hover, a:visited, a:link { color: black; }
</style>
</head>
<body>
    <div class="dz-div">
        <form action="upload-file.php" class="dropzone" id="dz"></form>
    </div>
<?php
	function filter($arr, $condition) {
		$res = []; foreach($arr as $e) { if($condition($e)) $res[] = $e; } return $res;
	}
    $files = filter(scandir('file'), function($e) {
        return $e != '.' && $e != '..' && is_file('./file/' . $e);
    });
    
    foreach($files as $file) {
        $file = iconv('gb2312', 'utf-8', $file);
        $path = './file/' . $file;
        $file_name = mb_strlen($file) < 40 ? $file : mb_substr($file, 0, 40, 'utf-8') . '...';
?>
    <div class="ls-div">
        <span class="ls-img-item"><img class="ls-img-l" src="img.png" /></span>
        <div class="ls-content" title="<?php echo $file; ?>"><a href="<?php echo $path; ?>"><?php echo $file_name; ?></a></div>
        <span class="ls-img-delete"><img class="ls-img-r" src="del.png" /></span>
    </div>
<?php    
    }
?>    
    <script src="jquery-2.2.0.min.js"></script>
    <script src="dropzone.js" ></script>
</body>
</html>
